<template>
  <div class="container">
    <div class="container-content">
      <el-form
        ref="formRef"
        label-width="90px"
        :model="state.formData"
        :rules="state.formRules"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="标题:" prop="msgTitle">
              <el-input
                v-model="state.formData.msgTitle"
                :maxlength="64"
                :show-word-limit="true"
                type="text"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="有效日期:" prop="validEndTime">
              <el-date-picker
                v-model="state.formData.validEndTime"
                :editable="false"
                type="date"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="接收人:" prop="receiveUserId">
              <el-input
                v-model="state.formData.receiveUserName"
                :readonly="true"
                style="width: 98%"
              >
                <template #append>
                  <el-button icon="Search" @click="handleOpenStaffSelector" />
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              class="vab-quill-content"
              label="消息内容:"
              prop="msgContent"
            >
              <WangEditor
                :height="365"
                :init-value="state.formData.msgContent"
                @change="onEditorChange"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          height: 50px;
        "
      >
        <div>
          <el-button
            icon="DocumentChecked"
            :disabled="state.disabledBtn"
            type="primary"
            @click="save"
          >
            发送
          </el-button>
        </div>
        <div style="margin-left: 10px">
          <el-link
            :href="
              './#/cmsdetail?type=message&id=' +
              state.formData.id +
              '&title=' +
              state.formData.msgTitle +
              '&content=' +
              state.formData.msgContent
            "
            target="_blank"
            type="primary"
          >
            <el-button icon="View" type="success"> 预览 </el-button>
          </el-link>
        </div>
      </div>
      <StaffPicker
        ref="staffRef"
        :ingore-binding="false"
        :single-select="false"
        title="选择员工"
        width="60%"
        @change="handleUserSelect"
      />
    </div>
  </div>
</template>
<script setup name="MessageSend">
import { useMessage } from "@/hooks/message";
import { addMessage } from "@/api/admin/message/message/";
import StaffPicker from "@/components/staffPicker.vue";
import WangEditor from "@/components/Editor/index.vue";

const formRef = ref(null);
const staffRef = ref(null);

const state = reactive({
  disabledBtn: false,
  formData: {
    id: "",
    msgTitle: "",
    receiveUserId: "",
    receiveUserName: "",
    validEndTime: "",
    msgType: "0",
    status: "0",
    msgContent: ""
  },
  formRules: {
    msgTitle: [{ required: true, message: "标题不能为空", trigger: "blur" }],
    receiveUserId: [
      { required: true, message: "接收人不能为空", trigger: "blur" }
    ],
    validEndTime: [
      {
        required: true,
        message: "有效截止日期不能为空",
        trigger: "blur"
      }
    ],
    msgContent: [{ max: 2048, message: "内容长度超出限制", trigger: "change" }]
  }
});

const save = () => {
  formRef.value.validate(async valid => {
    if (valid) {
      state.disabledBtn = true;
      const data = await addMessage(state.formData);
      if (data.code === 200) {
        state.formData.id = "";
        state.formData.msgTitle = "";
        state.formData.receiveUserId = "";
        state.formData.receiveUserName = "";
        state.formData.validEndTime = "";
        state.formData.msgType = "1";
        state.formData.status = "0";
        state.formData.msgContent = "";
        useMessage().success(data.msg);
        state.disabledBtn = false;
      } else {
        useMessage().warning(data.msg);
        state.disabledBtn = false;
      }
    }
  });
};

const handleOpenStaffSelector = () => {
  staffRef.value.show();
};

const handleUserSelect = rows => {
  if (rows) {
    const userIdList = [];
    const userNameList = [];
    rows.forEach(item => {
      userIdList.push(item.id);
      userNameList.push(item.userName);
    });
    state.formData.receiveUserId = userIdList.join(",");
    state.formData.receiveUserName = userNameList.join(",");
    console.log(state.formData);
  }
};

const onEditorChange = (arr, html) => {
  state.formData.msgContent = html;
};
</script>
<style lang="scss" scoped>
.vab-quill-content {
  width: 98%;
  :deep(.el-form-item__content) {
    line-height: normal;
  }
}
</style>
